<!--
 * @Description  : 搜索
 * @Author       : YiDing Xue
 * @Date         : 2023-02-23
 * @LastEditors  : YiDing Xue
 * @LastEditTime : 2023-03-07
-->
<template>
  <AppPage class="bg-[#f2f2f2]" article-class="py-0">
    <template #center>
      <router-link to="search">
        <nut-searchbar v-model="searchValue" @search="search" />
      </router-link>
    </template>
    <n-card v-for="item in albumList" :key="item.worksName" mt-20 rd-8>
      <div flex>
        <nut-image :src="item.imgUrl" width="100" height="100" radius="10" @click="toDetail(item.moduleWorksId, item.worksName)" />
        <section ml-5>
          <h4>{{ item.worksName }}</h4>
          <div mb-10 flex items-baseline>
            <div m-r-5 bg-yellow w-10 h-10 b-rounded-50 />
            <p text-12 font-bold>{{ item.author }}</p>
          </div>
          <p class="w-220 color-[#888888] text-ellipsis--l2">{{ item.intro }}</p>
        </section>
      </div>
    </n-card>
  </AppPage>
</template>

<script setup>
import { searchWorks } from '@/api/index'
const router = useRouter()
const searchValue = ref('')
const albumList = ref([])

/** 搜索 */
const search = async () => {
  const result = await searchWorks(searchValue.value)
  albumList.value = result.data.list
}

/**
 * 跳转作品详情页
 * @param {String} moduleWorksId 作品ID
 * @param {String} worksName 专辑名称
 */
const toDetail = (moduleWorksId, worksName) => {
  router.push({ name: 'worksDetail', query: { moduleWorksId, worksName } })
}
</script>
